<!DOCTYPE html>
<html>

	<head>
		<meta charset="UTF-8">
		<title>propsData 构造器的延伸</title>
	</head>

	<body>
		<div id="app">
			<h2>propsData 构造器的延伸</h2>
			<hr />
			<zidingyi></zidingyi>
		</div>
		<script src="../assets/js/vue.min.js"></script>
		<script type="text/javascript">
			var zidingyi = Vue.extend({
				template: `<h3 style="color: green;">{{content}}--{{num}}---{{num2}}</h3>`,
				data: function() {
					return {
						content: '这个是组件的延伸！'
					}
				},
				props: ['num', 'num2']
			});
			//自定义组件，声明完成后需要挂载到页面
			new zidingyi({
				propsData: {
					num: 123,
					num2: 'aaaa'
				}
			}).$mount('zidingyi');
		</script>
	</body>

</html>